import { Link, Outlet, useAccess, history } from 'umi'
import styles from './index.less'
import eventEmitter from '@/utils/eventEmitter'
import dayjs from 'dayjs'
import zhCN from 'antd/lib/locale/zh_CN'
import 'dayjs/locale/zh-cn'
import isBetween from 'dayjs/plugin/isBetween'
import { cloneDeep, throttle } from 'lodash'
import { message, DatePicker } from 'antd'
import { useEffect, useState } from 'react'

// @ts-ignore 修改分页快速跳转文字
zhCN.Pagination.jump_to = '到'
dayjs.locale('zh-cn') // 中文配置
dayjs.extend(isBetween) // 插件 时间范围判断

// 全局 EventBus
if (!window.EventBus) {
  window.EventBus = eventEmitter
}

const toHomePath = ['/', '/deviceManagement', '/system']

export default function Layout() {
  const [current, setCurrent] = useState(history.location.pathname) // 当前的路径
  const [firstLevelMenuList, setFirstLevelMenuList] = useState<firstMenuitemProps[]>([]) // 一级路由
  const access = useAccess()
  // 点击一级菜单
  const jumpMenu = (push: string, children?: secondMenuitemProps[]) => {
    // 为一级菜单时
    if (children && children[0]) {
      // 跳转下面的第一个一级菜单
      setCurrent(children[0].push)
    } else setCurrent(push)
  }
  // 页面前进回退匹配对应路由
  useEffect(() => {
    const fn = throttle(() => {
      setCurrent(document.location.pathname)
    }, 500)

    window.addEventListener('popstate', fn)
  }, [])

  // 实时修改路由
  useEffect(() => {
    if (history.location.pathname !== current) history.push(current)
  }, [current])

  // 测试下第一次提交 1 2 3 4
  // 重定向
  // useEffect(() => {
  //   if (toHomePath.includes(history.location.pathname)) setCurrent('/Home')
  // }, [history.location.pathname])

  return (
    <div className={styles.navs}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/docs">Docs</Link>
        </li>
      </ul>
      <Outlet />
    </div>
  )
}
